<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>网页文件</title>
    <style>
        @media only screen and (max-width: 1500px) {

            /* 在屏幕宽度小于或等于 768px 时的样式 */
            body {
                font-size: 20px;
                margin-left: 1rem;
            }

            input[type="text"] {
                width: 4rem;
            }
            input[type="button"],button {
                width: 5rem;
                font-size: 16px;
                height: 2rem;
            }
            p {
                margin-top: 0;
                margin-bottom: 0;

            }
            textarea{
                width: 80%;
                
            }
        }
    </style>
</head>

<body>
    <p id="totalWordCount">单词总数：</p>

    <!-- 文本输入框 -->
    <input type="text" id="txtInput1" value="1">
    <input type="text" id="txtInput2" value="5">
    <!-- 下拉框1 -->
    <select id="select1" value="1" title="选择难度">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <!-- 复选框 -->
    <br>
    <input type="checkbox" id="check1"> 英译汉/汉译英
    <input type="button" id="btnChoose" value="选定条件">
    <p id="chooseCount"> 选中单词总数：</p>
    <!-- textarea -->
    <p id="wordNumber">当前题目编号：</p>
    <textarea id="area1"></textarea><br>
    <textarea id="area2"></textarea><br>

    <!-- 按钮 -->
    <button id="btnNext">下一题</button>
    <button id="btnShowAns">显示答案</button>



    <!-- 下拉框2 -->
    <select id="select2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <br><button id="btnTest" style="display: none;">测试</button><br>
    <script>
        'strict mode';
        const wordList = [
            { num: 0, star: 1, English: "apple ", Chinese: "苹果 " },
            { num: 1, star: 1, English: "widely", Chinese: "adv. 广泛地" },
            { num: 2, star: 1, English: "combat", Chinese: "n. 战斗；搏斗；争论，反对φv. 与……战斗；防止，抑制（尤用于新闻报道）φadj. 战斗的；为……斗争的φn. (Combat) （法）孔巴（人名）φ[ 过去式 combated或combatted 过去分词 combated或combatted 现在分词 combating或combatting 复数 combats 第三人称单数 combats ]" },
            { num: 3, star: 1, English: "threshold", Chinese: "n. 入口；门槛；开始；极限；临界值" },
            { num: 4, star: 1, English: "admire", Chinese: "vt. 钦佩；赞美φvi. 钦佩；称赞φ[ 过去式 admired 过去分词 admired 现在分词 admiring 第三人称单数 admires ]" },
            { num: 5, star: 1, English: "sensitivity", Chinese: "n. 敏感；敏感性；过敏" },
            { num: 6, star: 1, English: "injustice", Chinese: "n. 不公正；不讲道义" },
            { num: 7, star: 1, English: "proof", Chinese: "n. 证明；证据；校样；考验；验证；试验φadj. 防…的；不能透入的；证明用的；耐…的φvt. 试验；校对；使不被穿透" },
            { num: 8, star: 1, English: "die", Chinese: "vi. 死亡；凋零；熄灭φvt. 死，死于……φn. 冲模，钢模；骰子φn. (Die) （法、美、德）迭（人名）" },
            { num: 9, star: 1, English: "alternative", Chinese: "adj. 供选择的；选择性的；交替的φn. 二中择一；供替代的选择φ[ 复数 alternatives ]" },
            { num: 10, star: 1, English: "well-being", Chinese: "n. 幸福；康乐" },
            { num: 11, star: 1, English: "substitution", Chinese: "n. 代替；[数] 置换；代替物" },
            { num: 12, star: 1, English: "cable", Chinese: "n. 缆绳；电缆；海底电报φvt. 打电报φvi. 打海底电报φ[ 复数 cables 第三人称单数 cables 现在分词 cabling 过去式 cabled 过去分词 cabled ]" },
            { num: 13, star: 1, English: "credibility", Chinese: "n. 可信性；确实性" },
            { num: 14, star: 1, English: "occasion", Chinese: "n. 时机，机会；场合；理由φvt. 引起，惹起" },
            { num: 15, star: 1, English: "definite", Chinese: "adj. 一定的；确切的" },
            { num: 16, star: 1, English: "astonishing", Chinese: "adj. 惊人的；令人惊讶的φv. 使…惊讶；使…诧异（astonish的ing形式）" },
            { num: 17, star: 1, English: "uncertainty", Chinese: "n. 犹豫；不确定的事物；不确定度" },
            { num: 18, star: 1, English: "scan", Chinese: "vt. 扫描；浏览；细看；详细调查；标出格律φvi. 扫描；扫掠φn. 扫描；浏览；审视；细看" },
            { num: 19, star: 1, English: "attendance", Chinese: "n. 出席；到场；出席人数；考勤φ[ 复数 attendances ]" },
            { num: 20, star: 1, English: "processor", Chinese: "n. [计] 处理器；处理程序；加工者" },
            { num: 21, star: 1, English: "operational", Chinese: "adj. 操作的；运作的" },

            //... 添加更多题目
        ];
        const txtInput1 = document.getElementById("txtInput1");
        const txtInput2 = document.getElementById("txtInput2");
        const area1 = document.getElementById("area1");
        const area2 = document.getElementById("area2");
        const btnNext = document.getElementById("btnNext");
        const btnShowAns = document.getElementById("btnShowAns");
        const check1 = document.getElementById("check1");
        const select1 = document.getElementById("select1");
        const select2 = document.getElementById("select2");
        let currentQuestion = null;
        let lastQuestionNum = 0;
        let wordListSon = [];
        window.onload = function () {
            for (let i = 0; i < localStorage.length; i++) {
                let key = localStorage.key(i);
                let value = localStorage.getItem(key);
                wordList[key].star = parseInt(value);
            }
            document.getElementById("totalWordCount").innerHTML = "单词总数：" + wordList.length;
        }
        document.getElementById("btnChoose").addEventListener("click", function () {
            wordListSon = [];
            for (let i = parseInt(txtInput1.value); i <= parseInt(txtInput2.value); i++) {
                if (wordList[i].star >= parseInt(select1.value)) {
                    wordListSon.push(wordList[i]);
                }
            }
            document.getElementById("chooseCount").innerHTML = "选中单词总数：" + wordListSon.length;
        });
        document.getElementById("btnTest").addEventListener("click", function () {
            select2.options[1].selected = true;



        });
        document.getElementById("btnNext").addEventListener("click", function () {
            // 随机选择题目，或者先显示顺序题目
            //random *(max-min)+min;
            //currentQuestion = wordList[Math.floor(Math.random() * (txtInput2.value-txtInput1.value)+parseInt(txtInput1.value))];


            currentQuestion = wordListSon[lastQuestionNum];
            lastQuestionNum++;
            if (lastQuestionNum > wordListSon.length - 1) {
                lastQuestionNum = 0;
            }
            document.getElementById("area1").value = "";
            document.getElementById("area2").value = "";

            // 根据复选框显示内容
            if (document.getElementById("check1").checked) {
                document.getElementById("area1").value = currentQuestion.English;
            } else {
                document.getElementById("area2").value = currentQuestion.Chinese;
            }
            document.getElementById("wordNumber").innerHTML = "当前题目编号：" + currentQuestion.num;
            let option = select2.options;
            for (let i = 0; i < option.length; i++) {
                if (option[i].value == currentQuestion.star) {
                    option[i].selected = true;
                }
            }
        });

        document.getElementById("btnShowAns").addEventListener("click", function () {
            if (document.getElementById("check1").checked) {
                document.getElementById("area2").value = currentQuestion.Chinese;
            } else {
                document.getElementById("area1").value = currentQuestion.English;
            }
        });

        // 下拉框2的值变化时，更新选中题目的star值
        select2.addEventListener("change", function () {
            currentQuestion.star = parseInt(this.value);
            localStorage.setItem(currentQuestion.num, this.value);
        });
    </script>
</body>

</html>